<template>
    <el-container class="login-container">
      <el-main>
        <div class="login-box">
          <h1 class="title">OmniTrack WMS登录系统</h1>
          <el-form
            ref="loginForm"
            :model="form"
            :rules="rules"
            class="login-form"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="form.password"
                placeholder="请输入密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login" :loading="loading">登录</el-button>
              <el-link type="primary" href="#/register">注册新账户</el-link>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { ElForm, ElFormItem, ElInput, ElButton, ElLink } from 'element-plus';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import axios from 'axios';
  
  interface LoginForm {
    username: string;
    password: string;
  }
  
  export default defineComponent({
    components: {
      ElForm,
      ElFormItem,
      ElInput,
      ElButton,
      ElLink,
    },
    setup() {
      const form = ref<LoginForm>({
        username: '',
        password: '',
      });
      const router = useRouter();
      const loading = ref(false);
  
      const rules = {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 10, message: '长度在4到10位之间', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在6到20位之间', trigger: 'blur' },
        ],
      };
  
      const login = () => {
        axios({
          url:'https://localhost:7164/api/Mangers/LoginHandle',
          method:'post',
          data:form.value,
         })
         .then((res)=>{
          if(res.data.code==100){
            ElMessage.success('登录成功')
          }
          else{
            ElMessage.error(res.data.message)
          }
         })
      };
  
      return {
        form,
        loading,
        rules,
        login,
        router,
      };
    },
  });
  </script>
  
  <style scoped lang="scss">
  // 仓库主题样式优化
  .login-container {
    height: 100vh;
    background: #f0f3e6; /* 木质原色背景 */
    background-image: url('https://example.com/wood-texture.jpg'); /* 木质纹理 */
    background-size: cover;
    background-position: center;
  }
  
  .login-box {
    max-width: 420px;
    margin: 40px auto;
    padding: 30px 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #d3d6da; /* 木质边框 */
    position: relative; /* 为伪元素添加定位 */
  }
  
  .title {
    text-align: center;
    color: #3a4f5c; /* 深棕色 */
    margin-bottom: 35px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 1px;
  }
  
  .login-form {
    .el-input {
      width: 100%;
      height: 45px;
      border-radius: 6px;
      border-color: #ced4da;
      &::placeholder {
        color: #9fa5a6; /* 浅灰色 */
      }
    }
  
    .el-form-item {
      margin-bottom: 22px;
    }
  
    .el-button {
      width: 100%;
      padding: 12px 0;
      background-color: #3498db; /* 主色调：仓库蓝 */
      border-color: #3498db;
      border-radius: 6px;
      font-size: 16px;
      letter-spacing: 1px;
      &:hover {
        background-color: #2980b9;
      }
      &.is-loading {
        background-color: #2980b9 !important;
      }
    }
  
    .el-link {
      margin-top: 15px;
      color: #e74c3c; /* 警示红色 */
      font-size: 14px;
      display: block; /* 使其独占一行 */
      text-align: center; /* 链接居中 */
    }
  }
  
  // 仓库主题装饰元素
  .login-box::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -20px;
    width: 80px;
    height: 80px;
    background-image: url('https://example.com/box-icon.png'); /* 包装箱图标 */
    background-size: contain;
  }
  
  .login-box::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 40px;
    width: 30px;
    height: 40px;
    background-image: url('https://example.com/shelf-icon.png'); /* 货架图标 */
    background-size: contain;
  }
  
  // 响应式适配
  @media (max-width: 480px) {
    .login-box {
      padding: 20px;
      margin: 20px auto;
    }
    .title {
      font-size: 24px;
    }
  }
  
  // 统一标签宽度
  .el-form-item__label {
    width: 68px !important; // 根据实际标签文字宽度调整
    flex: 0 0 auto;
  }
  
  // 强制内容区域宽度计算方式
  .el-form-item__content {
    flex: 1;
    min-width: 0; // 解决flex布局溢出问题
    width: calc(100% - 68px); // 与标签宽度匹配
  }
  
  // 输入框继承父容器宽度
  .el-input {
    width: 100%;
    max-width: 100%;
  }
  
  // 密码输入框特殊处理（如果有需要）
  .el-input--password {
    .el-input__wrapper {
      width: 100%;
    }
  }
  </style>
  